<template>
	<view class="mine-credit">
		<view class="top-content">
			<view class="credit-title">我的绿色积分</view>
			<view class="credit">{{ reputation }}</view>
		</view>
		<view class="button-group">
			<!-- <view class="button" @click="navigatePresent">
				<view class="left">
					<image class="img" src="/static/images/mine/present.png"></image>
					<view class="content-text">
						<view class="time-count-style">
							<view class="time-title">转赠</view>
						</view>
					</view>
				</view>
				<view class="right">
					<image class="in" src="/static/images/common/in.png"></image>
				</view>
			</view>
			<u-gap height="1" bgColor="#CDCDCD"></u-gap> -->
			<view class="button" @click="navigateDetail">
				<view class="left">
					<image class="img" src="/static/images/mine/credit_detail.png" mode="widthFix"></image>
					<view class="content-text">
						<view class="time-count-style">
							<view class="time-title">绿色积分明细</view>
						</view>
					</view>
				</view>
				<view class="right">
					<image class="in" src="/static/images/common/in.png"></image>
				</view>
			</view>
			<u-gap height="1" bgColor="#CDCDCD"></u-gap>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		Reputation_log
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 广告分详情滚动 */
				old: {
					scrollTop: 0
				}, // 账单详情滚动设置

				/* 加载更多 */
				loading: {
					status: 'loadmore', // 加载更多设置
					loadingText: '加载中',
					loadmoreText: '轻轻上拉加载更多',
					nomoreText: '暂时没有了',
				}, // 加载设置

				/* 广告分明细 */
				pages: 1, // 页数
				total_page: '', // 总页数
				amount: 10, // 条数
				reputation: '0', // 账户抢购分
				list: [],
			};
		},
		onLoad() {

		},
		onShow() {
			/* 获取账单明细 */
			this.getDetail(); // 获取账单列表
		},
		methods: {

			/* 账单明细 */
			getDetail() {
				const that = this;
				that.pages = 1;
				const params = {
					page: that.pages,
					limit: that.amount
				};
				Reputation_log(params).then((res) => {
					const result = res.data;
					that.reputation = result.reputation_value;
					that.total_page = result.last_page;
					that.list = result.data.map(item => {
						return {
							id: item.id,
							line_title: item.mark,
							line_date: item.create_time,
							extract_money: item.amount,
							amount: item.amount
						};
					});
					if (that.list.length == 0) {
						this.loading.status = 'nomore';
					};
				});
			},

			/* 跳转至广告分转赠页面 */
			navigatePresent() {
				uni.navigateTo({
					url: '/pages/mine/credit/present/present'
				})
			},
			
			/* 跳转至广告分明细页面 */
			navigateDetail() {
				uni.navigateTo({
					url: '/pages/mine/credit/creditDetail/creditDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #FCEBD9;
	}

	uni-page-body {
		background: none;
	}

	.mine-credit {
		background-image: linear-gradient(to bottom, #FCEBD9, #FAD1AE);
		// padding: 10px 18px 20px 18px;
		font-family: PingFang_Medium;

		.top-content {
			text-align: center;
			// background-color: #FEF4EA;
			padding: 100rpx 40rpx 120rpx 40rpx;
			border-radius: 10px;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;

			.credit-title {
				font-size: 44rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
			}

			.credit {
				margin: 20rpx 0 0rpx 0;
				color: #AD4440;
				font-size: 60rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
			}
		}
		
		.button-group {
			background-color: #FFFFFF;
			padding: 0 15px;
			// margin: 18px 3px;
			// box-shadow: 0px 2px 5px #dedede;
			
			.button {
				padding: 30rpx 0 30rpx 15rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;
				
				.left {
					display: flex;
					align-items: center;
					
					.img {
						width: 7vw;
						height: 6.5vw;
					}
					
					.content-text {
						margin-left: 18px;
						color: #686868;
						font-size: 15px;
					}
				}
				
				.right {
					
					.in {
						width: 3.7vw;
						height: 3.7vw;
					}
				}
			}
		}

		.mid-content {
			margin: 40rpx 0;

			.detail-title {
				font-size: 34rpx;
				font-weight: 600;
			}

			.button-group {
				margin: 34rpx 0;
				display: flex;
				align-items: center;

				.button-style {
					background-color: #FEF4EA;
					padding: 40rpx;
					border-radius: 10px;
					text-align: center;
					cursor: pointer;

					&:nth-of-type(n+2) {
						margin-left: 38rpx;
					}

					.button {
						width: 16vw;
						height: 16vw;

					}

					.button-text {
						color: #6B3C17;
						font-size: 30rpx;
					}
				}
			}
		}

		.bottom-content {
			margin: 40rpx 0;

			.detail-title {
				font-size: 34rpx;
				font-weight: 600;
			}

			.scroll-style {
				margin: 34rpx 0;
				background-color: #FFFFFF;
				border-radius: 10px;
				max-height: 70vh;
			}

			.extract-content {
				box-sizing: border-box;
				// background-color: #FFFFFF;
				// border-radius: 10px;
				padding: 16rpx 40rpx;
				// padding-top: 60rpx;


				.line-style {
					margin: 30rpx 0;
					box-sizing: border-box;

					&:nth-of-type(1) {
						margin-top: 0;
					}

					.line-content {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 30rpx 5px 30rpx 5px;

						.title-date {

							.line-title {
								color: #6B3C17;
								font-size: 30rpx;
							}

							.line-date {
								margin-top: 5px;
								color: #D6C9BF;
								font-size: 24rpx;
							}
						}

						.line-reputation-one {
							color: #AD4440;
							font-size: 36rpx;
							font-weight: 600;
						}

						.line-reputation-two {
							color: #6B3C17;
							font-size: 36rpx;
							font-weight: 600;
						}
					}

					.line {
						background-color: #EEEEEE;
						height: 1px;
					}
				}
			}
		}
	}
</style>
